.pie-chart-wrapper {
  position: relative;
  padding: 8px;
  border-radius: 50%;
  border: 1px solid var(--color-fill-2);

  &::after {
    content: '';
    top: 0;
    left: 0;
    position: absolute;
    width: 95%;
    height: 95%;
    border-radius: 50%;
    border: 2px solid var(--color-fill-3);
    z-index: 11;
  }

  .circle-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 54%;
    height: 54%;
    border-radius: 50%;
    z-index: 10;
    border: 1px solid var(--color-line-2);
    box-shadow: inset 0px 0px 3px var(--color-line-2);
    .circle-content {
      position: relative;
      width: 100%;
      height: 100%;
      transform: rotate(45deg);
      &::before,
      &::after {
        content: '';
        position: absolute;
        top: 50%;
        width: 0;
        height: 0;
        border: 2px solid transparent;
        border-top-color: var(--color-line-2);
        z-index: 12;
      }
      &::before {
        left: 0%;
        transform: rotate(-90deg);
      }
      &::after {
        right: 0%;
        transform: rotate(90deg);
      }
    }
  }
}

.pie-chart--small {
  .pie-chart-wrapper {
    width: 124px;
    height: 124px;
    padding: 8px;
  }
  .pie-chart-desc-legend {
    margin-left: 16px;
  }
}

.pie-chart--default {
  .pie-chart-wrapper {
    width: 124px;
    height: 124px;
  }
  .pie-chart-desc-legend {
    // margin-left: 72px;
    margin-left: 16px;
  }
}

.pie-chart-desc-legend {
  // max-height: 168px;
  // overflow: auto;
}
